<template>
  <div>
    <Header></Header>
    <div class="wrapper">
      <div class="banner_bg">
        <img class="" :src="require('@/assets/front-img/agent_banner.png')" alt="">
        <div class="banner_title_bg">
          <div class="title_name">经纪人专区</div>
          <div class="title_desc">专业领域 / 细分市场 / 蓝海前沿 / 商机无限</div>
        </div>
      </div>
      <div v-if="!showPoster" class="list_bg">
        <div @click="handleClick(item)" class="agent_bg" v-for="(item, index) in list" :key="item.id">
          <img class="agent_img" :class="{ temp_css: (index % 2) }" :src="item.image" alt="">
          <div class="content_bg">
            <div class="content_title">{{ item.name }}</div>
            <div class="detail_bg">
              <img class="sales_icon" :src="require('@/assets/front-img/icon_sales.png')" alt="">
              <div class="sales_text">销量 {{ item.buyNum }}</div>
            </div>
            <div class="go">进去看看</div>
            <div :class="{ y_line: !(index % 2) }"></div>
          </div>
          <div class="line"></div>
        </div>
      </div>
      <div v-else>
        <img style="margin: 30px;" src="https://image.utea88.com/statics/pc_jjr.png" alt="">
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import {
  getAgentList
} from "@/api/front-home.js";
import { getMemberInfoHome } from '@/api/user'
import Footer from "@/views/front/components/Footer";
import Header from "@/views/front/components/Header";
import Pagination from "@/views/front/components/Pagination";

export default {
  name: "AgentList",
  props: {

  },
  components: {
    Footer,
    Header,
    Pagination,
  },
  data() {
    return {
      total: 0,
      list: [],
      listQuery: {
        
      },
      showPoster: false
    }
  },
  computed: {
    
  },
  watch: {},
  methods: {
    getList() {
      getAgentList({ gongyingId: 48244 }).then(res => {
        this.list = res || []
      })
      .catch((err) => {
        
      })
    },
    handleClick(item) {
      this.$router.push({
        path: "/agentGoodList",
        query: { id: item.id }
      });
    },
    getMemberStatus() {
      getMemberInfoHome().then(res => {
        if (res.memberBroker && res.memberBroker > 0) {
          this.showPoster = false
        } else {
          this.showPoster = true  
        }
      })
      .catch((err) => {
        
      })
    }
  },
  created() {
    this.getList()
    this.getMemberStatus()
  },
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  .wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
		align-items: center;
    background-color: white;
  }

  .banner_bg {
    position: relative;
    display: flex;
    justify-content: center;
		width: 100%;
		height: 110px;

    .banner_title_bg {
      position: absolute;
      display: flex;
      width: 1300px;
      height: 110px;

      .title_name {
        height: 100%;
        line-height: 110px;
        opacity: 1;
        /** 文本1 */
        font-size: 48px;
        font-weight: 700;
        letter-spacing: 0px;
        color: rgba(255, 255, 255, 1);
        text-align: left;
        vertical-align: top;
      }

      .title_desc {
        position: relative;
        margin-left: 28px;
        margin-top: 41px;
        height: 44px;
        opacity: 1;
        /** 文本1 */
        font-size: 30px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 30px;
        color: rgba(255, 255, 255, 1);
        text-align: left;
        vertical-align: top;

      }
    }
  }

  .list_bg {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    width: 1300px;

    .agent_bg {
      position: relative;
      display: flex;
      width: 50%;
      height: 140px;
      padding-top: 30px;
      padding-bottom: 30px;
      cursor: pointer; 

      .agent_img {
        position: relative;
        width: 80px;
        height: 80px;
      }

      .temp_css {
        margin-left: 50px;
      }

      .content_bg {
        margin-left: 20px;
        height: 100%;

        .content_title {
          height: 24px;
          opacity: 1;
          /** 文本1 */
          font-size: 18px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 24px;
          color: rgba(15, 131, 193, 1);
          text-align: left;
          vertical-align: top;
        }

        .detail_bg {
          margin-top: 10px;
          display: flex;

          .sales_icon {
            width: 17px;
            height: 17px;
          }

          .sales_text {
            margin-left: 5px;
            height: 17px;
            opacity: 1;
            /** 文本1 */
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 17px;
            color: rgba(153, 153, 153, 1);
            text-align: left;
            vertical-align: top;
          }
        }

        .go {
          position: absolute;
          right: 50px;
          top: 50px;
          width: 120px;
          height: 40px;
          font-size: 14px;
          line-height: 40px;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          opacity: 1;
          border-radius: 5px;
          background: rgba(14, 131, 192, 1);
        }

        .y_line {
          position: absolute;
          top: 30px;
          right: 0;
          width: 1px;
          height: 80px;
          opacity: 1;
          background: rgba(218, 224, 232, 1);
        }
      }

      .line {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 1px;
        opacity: 1;
        background: rgba(218, 224, 232, 1);
      }
    }
  }
</style>